<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml" xml:lang = "en">
	<head>
		<meta http-equiv = "Content-Type" content = "text/html; charset = utf-8" />
		<title></title>
		<script type = "text/javascript" src="script/scrollAnime.js">
		</script>
		<style type = "text/css">
			.onclickFunction{
				color: #E22;
				font-weight: bolder;
				
			}
			input[type="button"]{
				width:200px;
				padding:auto 0px;
				margin-right:10px;
			}
			p{
				margin-left: 30px;
			}
		</style>
	</head>
	<body>	
		<h1>scrollAnime.js</h1>
		<h2>Explan</h2>
		<p>
			This script does the same thing as <a href = "http://plugins.jquery.com/project/ScrollTo" target = "blank">the jQuery plugin “scrollTo”</a>.<br/>
			The function is <span class="onclickFunction">scrollAnime(a, b, c)</span>.<br/>
			Only <span style="color:red;font-weight: bolder;">“a”</span> is necessary.
			
		</p>
		<p>
			“a” can be the scrolled y or a dom object, such as document.getElementById('div').
		</p>
		<p>
			“b” is the time for the animation. Default is 1000 (1 second).
		</p>
		<p>
			“c” is the scrolled x. Default is 0.
		</p>	
		
		<h2>Example</h2><hr/>
		<h3>Example 1</h3>
		<p><input type="button" value="Scroll to “y = 1000px”" onclick = "scrollAnime(1000)"/> The onclick function is <span class="onclickFunction">scrollAnime(1000)</span>.</p>
		<h3>Example 2</h3>
		<p><input type="button" value="Scroll to “div”" onclick = "scrollAnime( document.getElementById('div') , 500)"/> The onclick function is <span class="onclickFunction">scrollAnime( document.getElementById('div') , 500)</span>.</p>
		<script type = "text/javascript">
			//built multiple line texts
			for(var i  =  0; i < 100 ; i++){
				document.write("<p>text</p>");
			}
		</script>
		<div id = "div" style = "background-color : #CCF; width : 200px; border:3px double #669">This is a div.</div>

		<script type = "text/javascript">
			//built multiple line texts again
			for(var i  =  0; i < 100 ; i++){
				document.write("<p>text</p>");
			}
		</script>
		<script type = "text/javascript">
			//built one lon text line
			for(var i  =  0; i < 100 ; i++){
				document.write("text");
			}
		</script>
		<h3>Example 3</h3>
		<p><input type="button" value="Scroll to “div” & “x = 1000”" onclick = "scrollAnime( document.getElementById('div') , 1500, 1000)"/> The onclick function is <span class="onclickFunction">scrollAnime( document.getElementById('div') , 500, 1000)</span>.</p>
	</body>
</html>
